<%@ page import="com.zwxbc.funplay.entity.Player" %>
<%@ page import="com.zwxbc.funplay.service.GameService" %>
<%@ page import="com.zwxbc.funplay.service.impl.GameServiceImpl" %>
<%@ page import="com.zwxbc.funplay.service.impl.PlayerGameLibraryServiceImpl" %>
<%@ page import="com.zwxbc.funplay.entity.Game" %>
<%@ page import="java.util.List" %>
<%@ page import="com.zwxbc.funplay.service.impl.GameCommentServiceImpl" %>
<%@ page import="com.zwxbc.funplay.entity.GameComment" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/15
  Time: ฅ(΅•ㅅ•΅❀)ฅ 13:02
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的游戏库</title>
  <style>
    body {
      font-size: .875rem;
    }

    .feather {
      width: 16px;
      height: 16px;
    }

    .sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      padding: 48px 0 0;
      box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    }

    @media (max-width: 767.98px) {
      .sidebar {
        top: 5rem;
      }
    }

    .sidebar-sticky {
      height: calc(100vh - 48px);
      overflow-x: hidden;
      overflow-y: auto;
    }

    .sidebar .nav-link {
      font-weight: 500;
      color: #333;
    }

    .sidebar .nav-link .feather {
      margin-right: 4px;
      color: #727272;
    }

    .sidebar .nav-link.active {
      color: #2470dc;
    }

    .sidebar .nav-link:hover .feather,
    .sidebar .nav-link.active .feather {
      color: inherit;
    }

    .sidebar-heading {
      font-size: .75rem;
    }
  </style>
  <link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
  <script src="<c:url value="/js/bootstrap.bundle.min.js"/>"></script>
</head>

<body>
<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
         style="padding-top: 0;">

      <%
        Player player = (Player) session.getAttribute("user");
        List<Game> gameListByPlayer = new PlayerGameLibraryServiceImpl().getGameListByPlayerId(player.getPlayerId());
        pageContext.setAttribute("gameList", gameListByPlayer);
        pageContext.setAttribute("player", player);
      %>
      <div class="position-sticky pt-3 sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <h2 style="margin-bottom: 15px">游戏列表</h2>
          </li>
          <c:forEach var="game" items="${gameList}">
            <li class="nav-item">
              <a class="nav-link" href="library.jsp?gameId=${game.gameId}">
                <span data-feather="file" class="align-text-bottom"></span>
                ${game.gameName}
              </a>
            </li>
          </c:forEach>
        </ul>
      </div>
    </nav>

    <%
      String gameId = request.getParameter("gameId");
      if (gameId == null) {
        gameId = "1";
      }
      Game game = new GameServiceImpl().getGameById(Long.valueOf(gameId));
      pageContext.setAttribute("game", game);
    %>
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">${player.playerUsername}的游戏库</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group me-2">
            <a href="<c:url value="/view/player/store.jsp"/>" class="btn btn-primary w-20 mx-auto">游戏商店</a>
          </div>
          <a href="<c:url value="/view/player/playerInfo.jsp"/>" class="btn btn-primary w-20 mx-auto">个人信息</a>
        </div>
      </div>

      <div class="container">
        <div class="container-fluid p-4 p-md-5 mb-4 rounded text-bg-dark" style="height: 95vh;">
          <div class="row rounded"
               style="background: url('<c:url value='/img/game/${game.gameImage}'/>') center center no-repeat; background-size: cover; height: 100%;">
            <div class="col-md-5 offset-md-7 p-4 rounded"
                 style="background-color: rgba(0, 0, 0, 0.7); height: 100%;">
              <h3 class="text-white mb-4">${game.gameName}</h3>

              <div class="card text-white bg-dark mb-3">
                <div class="card-header">游戏介绍</div>
                <div class="card-body">
                  <p class="card-text">${game.gameIntroduction}</p>
                </div>
              </div>

              <div class="card text-white bg-dark mb-3">
                <div class="card-header">游戏信息</div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-6">
                      <%
                        java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("yyyy-MM-dd");
                        String formattedDate = sdf.format(game.getReleaseDate());
                      %>
                      <p class="card-text">发行日期: <%= formattedDate %> </p>
                      <p class="card-text">开发商: ${game.developerName}</p>
                    </div>
                    <div class="col-md-6" style="margin-top: 15px;">
                      <p class="card-text">评分: ★★★★☆</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12 text-center" style="margin-top: 20px;">
                  <a href="#" class="btn btn-primary w-50 mx-auto">开始游戏</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row g-5">
          <div class="col-md-8">
            <h3 class="pb-4 mb-4 fst-italic border-bottom">
              游戏评论
            </h3>

            <%
              List<GameComment> gameCommentList = new GameCommentServiceImpl().getGameCommentListByGameId(Long.valueOf(gameId));
              pageContext.setAttribute("gameCommentList", gameCommentList);

            %>
            <c:forEach var="gameComment" items="${gameCommentList}">
              <article class="blog-post">
                <div class="d-flex align-items-center mb-3">
                  <img src="<c:url value="/img/user/${gameComment.playerImage}"/>" alt="User Avatar" class="rounded-circle me-2" width="50" height="50">
                  <h4 class="blog-post-title mb-0">${gameComment.playerName}</h4>
                </div>

                <p class="blog-post-meta">${gameComment.commentDate} 发表</p>

                <p>${gameComment.comment}</p>
                <hr>
              </article>
            </c:forEach>

            <form id="commentForm" class="form-horizontal" action="<c:url value="/comment?action=add&gameId=${game.gameId}&playerId=${player.playerId}"/>" method="post"> <!-- 设置表单的 action 和 method -->
              <div id="commentInput" style="display: none;"> <!-- 默认隐藏 -->
                <textarea id="newComment" name="comment" rows="4" cols="50"></textarea> <!-- 将 textarea 的 id 改为 name，并添加 name 属性 -->
                <br>
                <!-- 将按钮类型从普通按钮改为提交按钮，移除 onclick 事件 -->
                <button type="submit" class="btn btn-outline-primary rounded-pill" style="margin-top: 10px">提交评论</button>
                <button class="btn btn-outline-primary rounded-pill" onclick="cancel()" style="margin-top: 10px">取消</button>
              </div>
            </form>

            <nav id="button" class="blog-pagination" aria-label="Pagination">
              <button class="btn btn-outline-primary rounded-pill" onclick="showCommentInput()" style="margin-top: 10px">发表评论</button>
            </nav>

          </div>

          <div class="col-md-4">
            <div class="position-sticky" style="top: 2rem;">
              <div class="p-4 mb-3 bg-light rounded">
                <h4 class="fst-italic">About</h4>
                <p class="mb-0">${game.gameIntroduction}</p>
              </div>
              <%
                List<Game> gameRatingTop = new GameServiceImpl().getGameRatingTop();
                pageContext.setAttribute("gameRatingTop", gameRatingTop);
              %>
              <div class="p-4">
                <h4 class="fst-italic">游戏评分排行榜</h4>
                <ol class="list-unstyled mb-0">
                  <c:forEach var="gameTop" items="${gameRatingTop}">
                    <li><a href="<c:url value="/view/player/gameInfo.jsp?gameId=${game.gameId}"/>">${gameTop.gameName}</a></li>
                  </c:forEach>
                </ol>
              </div>

              <div class="p-4">
                <h4 class="fst-italic">Elsewhere</h4>
                <ol class="list-unstyled">
                  <li><a href="#">GitHub</a></li>
                  <li><a href="#">Twitter</a></li>
                  <li><a href="#">Facebook</a></li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>>
    </main>
  </div>
</div>

<script>
  function showCommentInput() {
    document.getElementById("commentInput").style.display = "block";
    document.getElementById("button").style.display = "none";
  }

  function cancel() {
    document.getElementById("commentInput").style.display = "none";
    document.getElementById("commentInput").value = "";
    document.getElementById("button").style.display = "block";
  }

</script>
</body>

</html>
